<template>
  <div class="block">
  <el-pagination
    :current-page="page"
    :page-sizes="[5, 10, 20, 50, 100, 500]"
    :page-size="perItem"
    :total="totalItem"
    background
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="selectPage"
  />
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    totalItem: {
      type: Number,
      required: true
    }, // 总数
    perItem: {
      type: Number,
      default: 20
    }, // 每页个数
    page: {
      type: Number,
      default: 1
    }
  },
  methods: {
    // 处理页面变化
    selectPage(currentPage) {
      this.$emit('pagination', currentPage)
    },
    // 处理页码大小变化
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    }
  }
}
</script>

<style lang="scss">
  .el-pagination__jump {
    .el-input {
      width: 50%;
    }
  }
</style>
